<template>
    <div class="hospitals">
        <van-sticky>
            <div class="inp">
                <!-- 输入框以及j签到功能以及输入框滚动 -->
                <div class="input" type="text" placeholder="输入疾病|药品|症状|医生|检查" style="z-index: 9999;">
                    <div @click="search" style="height: 2.375rem;overflow: hidden;font-size: 0.75rem;">

                        <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false"
                            :show-indicators="false">
                            <van-swipe-item>糖尿病 <span
                                    style="width: 1.5625rem;height: 1.5625rem;color: red;background-color:#ffa689 ;">热</span></van-swipe-item>
                            <van-swipe-item>盐酸帕罗西汀片<span
                                    style="width: 1.5625rem;height: 1.5625rem;color: red;background-color:#ffa689 ;">热</span></van-swipe-item>
                            <van-swipe-item>易坦静</van-swipe-item>
                            <van-swipe-item>儿科</van-swipe-item>
                            <van-swipe-item> 霉菌性阴道炎</van-swipe-item>
                        </van-swipe>
                    </div>
                    <button class="btn">搜索</button>
                </div>

                <div class="img">
                    <img src="../../assets/img//fang.png" alt="">
                </div>
                <!-- 签到部分 -->
                <div class="qian">
                    <img src="https://staff.chunyu.mobi/@/media/images/2022/08/10/af07/b4f21555fe8e_w102_h102_.gif"
                        alt="">
                </div>
                <!-- 消息部分 -->
                <div class="message">
                    <img src="../../assets//img//message.jpg" alt=""  >
                </div>
            </div>
        </van-sticky>
        <div class="wen">
            <div class="left">
                <div class="arc">
                    <img src="../../assets//img/dui.png" alt=""
                        style="width: 10px;height: 10px;position: absolute;top: -1px;">
                    <span class="china">国家卫健委认证医疗机构</span>
                </div>
            </div>
            <div class="right">
                1.80亿用户信赖
            </div>
        </div>
        <!-- al聊天相关 以及找医生相关 -->
        <div class="center">
            <div class="grids">
                <div class="left-grids">
                    <div class="left"></div>
                    <div class="left-h1" style="position: relative;" @click="handelClinic">
                        <h2 style="margin-bottom: 1rem;margin-top: 1rem;margin-left: 1rem;"> 快速问诊</h2>
                        <h3 style="font-size: 14px;font-weight: normal;color: #b4b2b3;margin-left: 1rem;">7x24小时
                            <span>只能匹配医生</span>
                        </h3>
                        <div>
                            <img src="../../assets//img//jian.jpg" alt="" style="margin-bottom: 1.25rem;">
                            <div class="bei" style="width:13rem;height: 7rem;">
                                <img src="../../assets//img//dian.jpg" alt=""
                                    style="position: absolute;left:82px;top: 6rem;width: 120px;height: 80px;">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="right-grids" @click="handelDoctor">
                    <div style="width: 3rem;height: 1.3rem;background-color:#3395dc;position: absolute;right: 0;top: 1px;text-align: center;
                    line-height: 1.4rem;color: white; border-top-right-radius: 10px;border-bottom-left-radius: 10px;">
                        专业</div>
                    <h2 style="margin-bottom: 1rem;margin-left: -0.75rem;font-weight: 900;">找医生</h2>
                    <h3 style="font-size: 0.7rem;font-weight: normal;color: #b4b2b3;margin-left: -0.75rem;
    margin-top: 6px;">全国66万全国任意选</h3>
                    <img src="../../assets//img//doc.jpg" alt=""
                        style="width: 3.75rem;height: 2.5rem;position: absolute;right: 0.3rem;bottom: 2.2rem;">
                </div>
                <div class="right1-grids" @click="handelShop">
                    <h2 style="margin-left: 0.25rem;font-weight: 900;">送药上门</h2>
                    <h3 style="font-size: 0.7rem;font-weight: normal;color: #b4b2b3;margin-left: 0.25rem;
    margin-top: 6px;">全国发货 &emsp;正品保障</h3>
                    <img src="./../../assets//img/yao.jpg" alt=""
                        style="width: 3.75rem;height: 2.5rem;position: absolute;right: 0.3rem;bottom: 2.2rem;">
                </div>
            </div>
            <!-- 轮播 -->
            <div style="width: 100%; height: 8rem;margin-top: 1rem;">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item, index) in ImageList" :key="index" @click="LUoburl(item)">
                        <img :src="item.image" alt="">
                    </van-swipe-item>
                    <!-- <van-swipe-item>2</van-swipe-item>
                    <van-swipe-item>3</van-swipe-item>
                    <van-swipe-item>4</van-swipe-item> -->
                </van-swipe>
            </div>
            <!-- 宫格部分 -->
            <div class="daohang">
                <!-- <img :src="girdlist[3].tag_url" alt="" class="img1">
                <img :src="girdlist[6].tag_url" alt="" class="img2"> -->
                <van-grid class="danhang1" :border="false" column-num="7">
                    <van-grid-item v-for="(item, index) in girdlist" :key="index" :icon="item.icon" :text="item.text"
                        @click="griddetail(item)" class="gg" />
                </van-grid>
            </div>
            <!-- 专科门诊 -->
            <div class="zhuanke">
                <h3>{{ zklist.title }}<span>{{ zklist.sub_title }}</span></h3>
                <div>
                    <div v-for="(item, index) in zklist.card_list" :key="index" @click="zkdetail()">
                        <img :src="item.image" alt="">
                    </div>

                    <!-- {{ zklist.card_list[0].cy_redirect.target_scheme }} -->
                    <!-- <img :src="zklist.card_list[0].cy_redirect.target_scheme" alt=""> -->
                </div>
            </div>
            <!-- 精选医生 -->
            <div class="jingxuan">
                <h3 @click="toDoctorlist">精选医生<span>查看更多<van-icon name="arrow" /></span></h3>
                <div class="doctor">
                    <div v-for="(item, index) in doctorlist.RECORDS" :key="index" @click="toDoctor(item)">
                        <img :src="item.image" alt="">
                        <div class="right">
                            <p>
                                {{ item.name }}
                            </p>
                            <p class="title">
                                {{ item.title }}
                                {{ item.clinic_name }}
                            </p>
                            <p class="hospital">
                                {{ item.hospital_name }}
                            </p>
                            <p class="tag">
                                <span class="type">
                                    三甲
                                </span>
                                <span class="hospital_tag_text">
                                    {{ item.tags[1].name }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 特色服务 -->
            <div class="service">
                <h3>
                    特色服务
                    <span>一站式医疗健康解决方案</span>
                    <span class="more">查看更多</span>
                </h3>
                <div>
                    <div class="top">
                        <img v-for="(item, index) in servicelist" :key="index" :src="item.big_image" alt=""
                            @click="big_image(item)">
                    </div>
                    <div class="middle">
                        <img v-for="(item, index) in servicelist" :key="index" :src="item.small_image" alt=""
                            @click="big_image(item)">
                        <!-- <img src="../../assets/img/service_1.png" alt="">
                        <img src="../../assets/img/service_2.png" alt=""> -->
                    </div>
                    <div class="bottom">
                        <img src="../../assets/img/service_3.png" alt="">
                        <img src="../../assets/img/service_4.png" alt="">
                        <img src="../../assets/img/service_5.png" alt="">
                    </div>
                </div>
            </div>
            <!-- Tab切换 热点专家科普   -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
                class="vanlist">
                <van-tabs title-active-color="#3dc18c" color="#3dc18c" v-model:active="active">
                    <van-tab title="热点" title-style="font-weight: normal;">
                        <div v-for="(item, index) in tablist" :key="index" @click="listDetail(item)" class="tablist">
                            <img v-error v-img-lazy="item.image" src="" alt="">
                            <div>
                                <p>{{ item.title }}</p>
                                <p class="type">
                                    {{ item.channel_name }}
                                    {{ item.date_str }}
                                </p>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="专家科普" title-style="font-weight: normal;">
                        <div v-for="(item, index) in zhuanjialist" :key="index" class="ZJlist"
                            @click="zhuanjiandetail(item)">
                            <p class="question">{{ item.topic_info.title }}</p>
                            <p class="content"> {{ item.topic_info.content }}</p>
                            <div class="xinxi">
                                <img :src="item.topic_info.doctor.image" alt="">
                                <span>{{ item.topic_info.doctor.name }}</span>
                                <span class="tag">{{ item.topic_info.doctor.tag }}</span>
                                <span>{{ item.topic_info.doctor.title }}</span>
                                <span>{{ item.topic_info.doctor.hospital }}</span>
                            </div>
                            <div class="dibu">
                                <span class="type">图文</span>
                                <span class="num">
                                    阅读{{ item.topic_info.read_num }}
                                </span>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="生活" title-style="font-weight: normal;">
                        <div v-for="(item, index) in tablist2" :key="index" @click="listDetail(item)" class="tablist">
                            <img :src="item.image" alt="">
                            <div>
                                <p>{{ item.title }}</p>
                                <p class="type">
                                    {{ item.channel_name }}
                                    {{ item.date_str }}
                                </p>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="母婴" title-style="font-weight: normal;">
                        <div v-for="(item, index) in tablist3" :key="index" @click="listDetail(item)" class="tablist">
                            <img :src="item.image" alt="">
                            <div>
                                <p>{{ item.title }}</p>
                                <p class="type">
                                    {{ item.channel_name }}
                                    {{ item.date_str }}
                                </p>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="辟谣" title-style="font-weight: normal;">
                        <div v-for="(item, index) in tablist4" :key="index" @click="listDetail(item)" class="tablist">
                            <img :src="item.image" alt="">
                            <div>
                                <p>{{ item.title }}</p>
                                <p class="type">
                                    {{ item.channel_name }}
                                    {{ item.date_str }}
                                </p>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </van-list>
        </div>
    </div>
</template>

<script setup lang="ts">
import { NoticeBar } from 'vant';
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
const noticeBar = ref(localStorage.getItem('noticeBar') == 'true' ? "true" : "false")
import axios from 'axios'
import doctorlist from '../../data/doctordetail.json'

const router = useRouter()
var ImageList = ref([])
// const doctorlist = ref([])
// tab切换
const active = ref(0);
const items = ref([])
const tablist = ref([])
const tablist2 = ref([])
const tablist3 = ref([])
const tablist4 = ref([])
const list = ref([])

onMounted(() => {
    console.log(doctorlist);
})

// 宫格定义 
const girdlist = ref([])
const zklist = ref([])
const servicelist = ref([])
const zhuanjialist = ref([])
// 上拉加载定义
const loading = ref(false);
const finished = ref(false);
const pagecode = ref(0)
const pagesize = ref(10)

const toDoctorlist = () => {
    router.push({ path: '/Doctor' })
}

// 轮播图跳转
var LUoburl = (item: any) => {
    window.location.href = item.url
}

//引导页
const getNOtice = () => {
    if (noticeBar.value == "false") {
        router.push({ path: '/guide' })
        localStorage.setItem('noticeBar', 'false')
    }
}
getNOtice()

// 上拉加载
const onLoad = () => {
    pagecode.value++
    TabList()
    Tab2List()
    Tab3List()
    Tab4List()
    setTimeout(() => {
        // 加载状态结束
        loading.value = false;
    }, 1000);
};
// 跳转快速问诊
const handelClinic = () => {
    router.push({ path: '/Clinic' })
}
// 跳转找医生
const handelDoctor = () => {
    router.push({ path: '/Doctor' })
}
// 送货上门
const handelShop = () => {
    router.push({ path: '/shop' })
}
// 找医生
const toDoctor = (item) => {
    router.push({
        path: '/doctordetail',
        query: {
            item: JSON.stringify(item)
        }
    })
}
// tab列表详情
const listDetail = (item) => {
    router.push({
        path: `/listdetail/${item.id}`,
        query: {
            id: item.id
        }
    })
}
// 宫格详情
const griddetail = (item) => {
    window.location.href = item.jump_url
}
// 专科门诊详情
const zkdetail = () => {
    window.location.href = zklist.value.card_list[0].cy_redirect.target_scheme
}
// 精选医生
// async function DoctorList() {
//     const res = await axios.get('/addres/ChunYuDetail')
//     console.log(res.data.data.RECORDS)
//     doctorlist.value = res.data.data.RECORDS
// }
// DoctorList()

// tab专家科普详情
const zhuanjiandetail = (item) => {
    console.log(item.topic_info);

    router.push({
        path: `/kepudetail`,
        query: {
            item: JSON.stringify(item.topic_info)
        }
    })
}

const big_image = (item) => {
    // console.log(item.param.url);
    window.location.href = item.param.url
}

// 获取宫格数据
async function DirdList() {
    const res = await axios.get('/static/cooperation/wap/homepage_info/', {
        params: {
            from_wx_mini: '1',
            need_ab_test: '1',
            abtest_v2: '1',
            version: '10.6.8',
            device_id: 'oOKH50Osc-tkNqwuSmwa0ktH4aV4'
        }
    })
    // console.log(res.data.important_position)
    girdlist.value = res.data.important_position
    console.log(girdlist.value);

}
DirdList()
// 专科门诊
async function ZKList() {
    const res = await axios.get('/static/cooperation/wap/homepage_info/', {
        params: {
            from_wx_mini: '1',
            need_ab_test: '1',
            abtest_v2: '1',
            version: '10.6.8',
            device_id: 'oOKH50Osc-tkNqwuSmwa0ktH4aV4'
        }
    })
    // console.log(res.data);
    // console.log(res.data.specialized_clinic)
    zklist.value = res.data.specialized_clinic
}
ZKList()
// 特色服务
async function ServiceList() {
    const res = await axios.get('/static/api/v8/user_home_page/hot_sales_v2/', {
        params: {
            from_wx_mini: '1',
        }
    })
    // console.log(res.data.item_list)
    servicelist.value = res.data.item_list
}
ServiceList()
// 轮播图
const getImage = async () => {
    var res = await axios.get('/static/cooperation/wap/homepage_info/')
    if (res.status == 200) {
        // console.log(res.data.banners);
        ImageList.value = res.data.banners
    }
}
getImage()

// tab列表数据
async function TabList() {
    const res = await axios.get('/static/cooperation/wap/health_news/', {
        params: {
            from_wx_mini: '1',
            page: pagecode.value,
            partner: 'chunyu_wap_mini',
            release_time: '2020-04-22%2010%3A30%3A00',
            channel_id: '0'
        }
    })
    console.log(res.data.content_list)
    // items.value = res.data.content_list
    // items.value = [...items.value, ...res.data.content_list]
    tablist.value = [...tablist.value, ...res.data.content_list]
}
TabList()
// 列表二
async function Tab2List() {
    const res = await axios.get('/static/cooperation/wap/health_news/', {
        params: {
            from_wx_mini: '1',
            page: pagecode.value,
            partner: 'chunyu_wap_mini',
            release_time: '2020-04-22%2010%3A30%3A00',
            channel_id: '21'
        }
    })
    // console.log(res.data.content_list)
    // tablist2.value = res.data.content_list
    tablist2.value = [...tablist2.value, ...res.data.content_list]
}
Tab2List()
// 列表三
async function Tab3List() {
    const res = await axios.get('/static/cooperation/wap/health_news/', {
        params: {
            from_wx_mini: '1',
            page: pagecode.value,
            partner: 'chunyu_wap_mini',
            release_time: '2020-04-22%2010%3A30%3A00',
            channel_id: '6'
        }
    })
    // console.log(res.data)
    // tablist3.value = res.data.content_list
    tablist3.value = [...tablist3.value, ...res.data.content_list]
}
Tab3List()

async function Tab4List() {
    const res = await axios.get('/static/cooperation/wap/health_news/', {
        params: {
            from_wx_mini: '1',
            page: pagecode.value,
            partner: 'chunyu_wap_mini',
            release_time: '2020-04-22%2010%3A30%3A00',
            channel_id: '18'
        }
    })
    // console.log(res.data.content_list)
    // tablist4.value = res.data.content_list
    tablist4.value = [...tablist4.value, ...res.data.content_list]
}
Tab4List()

async function zhuanjiaList() {
    const res = await axios.get('/static/cooperation/wap/topic_check_list/', {
        params: {
            page: '1',
        }
    })
    // console.log(res.data.topic_check_list);
    zhuanjialist.value = res.data.topic_check_list
}
zhuanjiaList()

const search = () => {
    router.push({ path: '/searchdoctor' })
}

</script>

<style lang="scss" scoped>
.my-swipe {
    width: 100%;
    height: 100%;
}

.my-swipe img {
    width: 100%;
    height: 100%;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}

.inp {
    // width: 100%;
    height: 4.375rem;
    background-color: #fff;
    position: relative;

    .input {
        margin-left: 0.625rem;
        padding: 0 2.5rem;
        position: absolute;
        top: 0.625rem;
        line-height: 1.375rem;
        width: 74%;
        border-radius: 15px;
        height: 2.5rem;
        border: 0.0625rem solid #6dd0a2;
        outline: none;
        z-index: 9999;
    }

    .btn {
        position: absolute;
        border-radius: 1.25rem;
        border: none;
        height: 2.25rem;
        width: 3.625rem;
        right: -0.0675rem;
        top: 0.1rem;
        background-color: #3dc18c;
        color: white;
    }

    .img img {
        width: 1.25rem;
        height: 1.25rem;
        position: absolute;
        left: 1.25rem;
        top: 1.25rem;
        z-index: 9999;
    }

    .qian img {
        position: absolute;
        width: 2.1875rem;
        height: 2.1875rem;
        right: 3.1rem;
        // z-index: 9999;
        top: 0.7813rem;
    }

    .message img {
        position: absolute;
        width: 1.875rem;
        height: 1.875rem;
        right: 0.625rem;
        top: 1.0313rem;
        z-index: 9999;
    }
}

.notice-swipe {
    height: 2.5rem;
    line-height: 2.5rem;
}

.wen {
    position: relative;

    .right {
        position: absolute;
        font-size: 0.75rem;
        right: 0.75rem;
        top: -0.75rem;
        color: #e7e7e7;
    }
}

.arc {
    width: 0.625rem;
    height: 0.652rem;
    border: 0.0625rem solid #ccc;
    border-radius: 50%;
    position: absolute;
    font-size: 0.9375rem;
    left: 0.3125rem;
    top: -0.8125rem;
}

.china {
    font-size: 0.75rem;
    color: #e7e7e7;
    width: 8.4375rem;
    position: absolute;
    left: 0.9375rem;
}

.center {
    width: 100%;
    background-color: #f9f9f9;
    position: relative;

    .grids {
        margin-top: 0.625rem;
        width: 100%;
        height: 14.3125rem;
        background-color: #f6f6f6;
        position: relative;
        top: 0.625rem;
        clear: both;

        .left-grids {
            position: absolute;
            width: 13.4375rem;
            height: 14.3125rem;
            background-color: #fff;
            box-shadow: 5px 5px -12px 0px #ccc;

            .left {
                position: absolute;
                width: 13.4375rem;
                ;
                height: 1.875rem;
                background: url('../../assets//img//pic.jpg') no-repeat;
            }
        }

        .right-grids {
            padding: 3.1875rem 1.625rem;
            top: 0.0625rem;
            position: absolute;
            right: 0.5625rem;
            width: 11.25rem;
            height: 5rem;
            background-color: #fff;
            border-top-right-radius: 10px;

            box-shadow: 5px 5px -12px 0px #ccc;

            h2 {
                position: absolute;
                top: 0.6rem;

            }
        }

        .right1-grids {
            padding: 1.75rem 0.625rem;
            position: absolute;
            right: 0.5625rem;
            top: 7.375rem;
            width: 11.25rem;
            background-color: #fff;
            box-shadow: 5px 5px -12px 0px #ccc;
            ;
        }
    }

    .daohang {
        width: 95%;
        // width: 400px
        margin: .6rem auto;
        overflow-x: auto;
        border-radius: .5rem;
        position: relative;

        .img1 {
            width: 30px;
            height: 20px;
            position: absolute;
            left: 70%;
            z-index: 999;
        }

        .img2 {
            width: 30px;
            height: 20px;
            left: 33%;
            top: 50%;
            position: absolute;
            z-index: 999;
        }

        .van-grid {
            width: 140%;
            display: flex;
            flex-wrap: wrap;
        }

    }

    .jingxuan {
        width: 95%;
        padding: 10px;
        margin: .6rem auto;
        background: white;
        border-radius: .5rem;

        h3 {
            font-weight: normal;
            margin-bottom: 10px;
            position: relative;

            span {
                font-size: 14px;
                color: #999;
                position: absolute;
                right: 0;
                top: 5px;
            }
        }

        .doctor {
            display: flex;
            flex-wrap: wrap;

            >div {
                width: 50%;
                display: flex;

                img {
                    width: 2.525rem;
                    height: 2.525rem;
                    border-radius: 50%;
                    margin: 0.3rem;
                    border: 1px solid #dfdfdf;
                }

                div {
                    p {
                        margin: 0.3125rem;
                    }

                    .title {
                        width: 8rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 0.8rem;
                        font-weight: 400;
                    }

                    .hospital {
                        width: 8rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 0.8rem;
                        font-weight: 400;
                    }

                    .tag {
                        .type {
                            background: #1cc381;
                            color: white;
                            font-size: 13px;
                            padding: 1px 3px;
                            border-radius: 3px;
                        }

                        .hospital_tag_text {
                            margin-left: 3px;
                            text-align: center;
                            padding: 2px;
                            font-size: 13px;
                            background-color: rgba(245, 228, 189, 0.849);
                            color: rgba(112, 81, 8, 0.849);
                        }
                    }
                }
            }
        }
    }

    .zhuanke {
        width: 95%;
        background: white;
        padding: 10px;

        h3 {
            font-weight: normal;
            margin-bottom: 8px;

            span {
                font-size: 14px;
                color: #999;
                margin-left: .3rem;
            }
        }

        >div {
            display: flex;

            div {
                width: 48%;
            }

            img {
                width: 100%;
                border-radius: .5rem;
            }
        }

    }

    .service {
        width: 95%;
        background: white;
        padding: 10px;

        h3 {
            font-weight: normal;

            span {
                font-size: 14px;
                color: #999;
            }

            .more {
                margin-left: 80px;
            }
        }

        >div {
            .top {
                display: flex;

                img {
                    width: 47%;
                    margin: 5px;
                }
            }

            .middle {
                display: flex;

                img {
                    width: 47.5%;
                    margin: 5px 20px 5px -12px;
                }
            }

            .bottom {
                display: flex;

                img {
                    width: 30.6%;
                    margin: 5px;
                }
            }
        }
    }

    .vanlist {
        margin-bottom: 50px;

        .tablist {
            padding: 10px 0;
            background: white;
            display: flex;
            border-top: 1px solid #e1e1e1;

            img {
                width: 6.25rem;
                height: 5rem;
                margin: 0.625rem;
                flex-shrink: 0;
            }

            div {
                margin: 12px 8px;
                position: relative;

                .type {
                    position: absolute;
                    color: #999;
                    font-size: 14px;
                    bottom: -10px;
                }
            }
        }
    }



    .ZJlist {
        background: white;
        border-bottom: 1px solid #999;
        padding: 10px;

        .question {
            width: 95%;
            margin: 10px auto;
        }

        .content {
            width: 95%;
            font-size: 14px;
            color: #999;
            padding: 3px;
            background: #f4f4f4;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .xinxi {
            margin: 5px 5px;
            display: flex;
            align-items: center;

            img {
                width: 25px;
                height: 25px;
                border-radius: 50%;
                margin: 0;
            }

            .tag {
                background-color: rgb(244, 216, 206);
                color: orangered;
                font-size: 12px;
                padding: 1px 3px;
                border-radius: 3px;
            }

            span {
                margin: 0 3px;
                color: #999;
                font-size: 14px;
            }
        }

        .dibu {
            width: 95%;
            color: #999;
            font-size: 12px;

            .type {
                background: #f4f4f4;
                border-radius: 8px;
                padding: 1px 2px;
            }

            .num {
                float: right;
            }
        }
    }
}

.bei {
    width: 13rem;
    height: 7rem;
    background: url('../../assets//img//bei.jpg')no-repeat;
}
</style>
